import React from 'react'
import {fetch} from '../../../../my_axios/api'
import {Input,Row,Col,Select,message,Button,} from 'antd'
import './search_bar.less'
const Option = Select.Option;
export default class SearchBar extends React.Component{
    constructor(props){
        super(props)
        this.state={
            roles:[],
            queryName:'',
            queryrole:''
        }
    }
    componentDidMount() {

    };
    inputOnChange(even){
        this.setState(
            {
                queryName:even.target.value
            }
        )
    }
    selectOnChange(value){
        this.setState(
            {
                queryrole:value
            }
        )
    }
    querySubmit(){
        this.props.callback(this.state.queryName,this.state.queryrole);
    }
    render(){
        let items=[];
        for(var rolu of this.props.roles){
            items.push( <Option value={rolu.code} key={rolu.id}>{rolu.name}</Option>)
        }
        return(
            <div>
                <form onSubmit={this.handleSubmit}>
                    <Row className="my_row">
                        <Col  xs={24} sm={12} md={8} lg={6} xl={6} className="my_div">
                            <span className='screening-item'>姓名</span>
                            <div className="my_input">
                                <Input  placeholder="请输入用户姓名" onChange={this.inputOnChange.bind(this)} type="text" value={this.state.queryName}></Input>
                            </div>
                        </Col>
                        <Col  xs={24} sm={12} md={8} lg={6} xl={6} className="my_div">
                            <span className='screening-item'>角色</span>
                            <div className="my_input" >
                                <Select onChange={this.selectOnChange.bind(this)} allowClear  placeholder="请选择角色">
                                    {items}
                                </Select>
                            </div>
                        </Col>
                        <Col xs={24} sm={24} md={8} lg={12} xl={12} className="bt_div">
                            <Button className="my_button" onClick={this.querySubmit.bind(this)}>查询</Button>
                        </Col>
                    </Row>
                </form>
            </div>
        )
    }
}